<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>登录界面</title>
    <!-- Bootstrap core CSS -->
    <link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">
    <!-- Custom styles for this template -->
    <!--<link href="asserts/css/signin.css" th:href="@{/asserts/css/signin.css}" rel="stylesheet" >-->
    <style>
        .login{
            width: 400px;
            height: 300px;
            margin: 0 auto;
        }
        .acolor{
            color: cornsilk;
        }
        .error_color{
            color: crimson;
        }
    </style>
</head>

<body class="text-center">

<br><br><br>
<form class="form-signin" action="/login/commit" method="post" onsubmit="return check();">
    <label class="sr-only" ></label>
    <img th:src="@{/asserts/img/index.jpg}" src="asserts/img/index.jpg" alt="" width="125" height="125">
    <label class="sr-only" ></label>
    <p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
    <h1 class="h3 mb-3 font-weight-normal" >请登录</h1>

    <!--判断-->
    <!--/*@thymesVar id="msg" type="message"*/-->
    <div class="login">
    <label class="sr-only" ></label>
    <input type="text"  name="username" id="username" class="form-control" placeholder="用户名/手机号" />
        <span id="span1" class="error_color"></span>
    <label class="sr-only" ></label>
    <input type="password" name="password" id="password" class="form-control" placeholder="密码" />
        <span id="span2" class="error_color"></span>
    <div class="checkbox mb-3">

    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit" id="submit">用户登录</button>
    <button class="btn btn-lg btn-primary btn-block" ><a href="/user/add" class="acolor">注册</a></button>
    <button class="btn btn-lg btn-primary btn-block" type="submit" id="root_submit">管理员登录</button>
    </div>
    <p class="mt-5 mb-3 text-muted">© 2020-2021</p>
</form>
</div>
<script type="text/javascript">

    let temp;
    let test1 = false;
    let test2 = false;
    let temp1;
    window.onload = function(){

        document.getElementById("username").onblur = function() {
            temp = document.getElementById("username").value;
            if (temp == '') {
                document.getElementById("span1").innerText = "用户名不能为空";
                return;
            }else {
                test1 = true;
            }
        }
        document.getElementById("password").onblur = function () {
            temp1 = document.getElementById("password").value;
            if (temp1 == ""){
                document.getElementById("span2").innerText = "密码不能为空"
            }else{
                test2 = true;
            }
        }
        document.getElementById("username").onfocus = function(){
            document.getElementById("span1").innerText = "";
        }
        document.getElementById("password").onfocus = function(){
            document.getElementById("span2").innerText = "";
        }

        document.getElementById("submit").onfocus = function () {
            if (document.getElementById("username").value == ""){
                document.getElementById("span1").innerText = "用户名不能为空";
            }
            if (document.getElementById("password").value == ""){
                document.getElementById("span2").innerText = "密码不能为空"
            }
        }

        document.getElementById("root_submit").onfocus = function () {
            if (document.getElementById("username").value == ""){
                document.getElementById("span1").innerText = "用户名不能为空";
            }
            if (document.getElementById("password").value == ""){
                document.getElementById("span2").innerText = "密码不能为空"
            }
        }






    }
    function check() {


        return test1 && test2;

    }
</script>
</body>

</html>